/**
 * 行情 - 样式
 */
//
// 图表标题切换（依附chart-wrap)
//
.chart-tab-title{
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  .active{
    color: #333333;
    background-color: #ffffff;
  }
  > *{
    flex: 1;
    text-align: center;
    font-size: 1.17rem;
    padding: 0.28rem 0;
    background-color: #fbfbfb;
    color: #bdbdbd;
  }
  > * + *{
    border-left: 1px solid #EEEEEE;
  }
}
//
// 查看历史收益
//
.banner-history-wrap{
  color: #FF1010;
  text-align: center;
  margin: 20px 0 30px 0;
  > * {
    box-shadow: 1px 2px 4px -1px #4b4b4b8a;
    display: inline-block;
    opacity: 0.9;
    background-color: #ffffffd4;
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
    position: relative;
  }
}
//
// 交易对切换
//
.pair-tab{
  margin-bottom: 0.71rem;
  .tab-list{
    height: 238px;
    overflow-y: auto;
    background-color: #ffffff;
    margin-top: 0.71rem;
    .item + .item{
      box-shadow: 0 -1px 0 0 #EFEFEF;
    }
    .item{
      padding: 0.71rem 1.07rem;
      display: flex;
      justify-content: space-between;
      .left,.right{
        display: flex;
        align-items: center;
      }
      .change{
        width: 68px;
        padding: 0.12rem 0;
        text-align: center;
        display: inline-block;
        color: #ffffff;
        font-size: 1.14rem;
        border-radius: 4px;
        &.up{
          background-color: #7ED321;
        }
        &.down{
          background-color: #FF1010;
        }
      }
      .title{
        color: #333333;
        font-size: 1.14rem;
        line-height: 1.3;
      }
      .subt{
        color: #666666;
        font-size: 0.85rem;
        line-height: 1.7;
      }
      img{
        margin-right: 0.71rem;
        height: 22px;
      }
      .change{
        margin-left: 0.71rem;
      }
    }
  }
  .tab-title{
    background-color: #ffffff;
    padding: 0 1.07rem;
    color: #999999;
    position: relative;
    .active{
      color: #FEA620;
      box-shadow: 0 2px 0 0 #FEA620;
    }
    > *{
      display: inline-block;
      height: 100%;
      padding: 0.57rem 0.42rem;
    }
  }
}
//
// 底部按钮
//
.bot-btn-wrap{
  height: 120px;
}

.showbox{
  display: flex;
  flex-direction: column;
  align-items: left;
  // 基金概况
  &.show1{
    padding: 10px 15px;
    box-shadow: 0 0 0 1px #EFEFEF;
    color: #666666;
    text-indent: 2em;
  }
  // 产品参数说明列表
  &.show2, &.show3-ai{
    box-shadow: 0 0 0 1px #EFEFEF;
    .item{
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      .left{
        color: #666666;
      }
      .right{
        color: #FEA620;
      }
    }
    .item:last-child{
      box-shadow: 0 0 0 0;
    }
    &.stripe{
      .item:nth-child(even){
        background-color: #F6F6F6;
      }
    }
    &.show2-ai{
      .item:last-child{
        box-shadow: 0 0px 0 1px #EFEFEF;
      }
    }
  }
  // 风控保障说明列表
  &.show3, &.show2-ai{
    .item{
      display: flex;
      flex-direction: column;
      box-shadow: 0 1px 0 0 #EFEFEF;
      position: relative;
      .content{
        padding: 8px 0;
        color: #666666;
      }
      .title{
        color: #FEA620;
        > *{
          vertical-align: middle;
        }
        &:before{
          vertical-align: middle;
          display: inline-block;
          content: '';
          width: 2px;
          height: 1.37rem;
          margin-right: 8px;
          background-color: #FEA620;
        }
      }
    }
  }
}

//
// 单元组
//
.cell-group{
  background-color: #ffffff;
  margin-top: 0.71rem;
  .cell{
    display: flex;
    justify-content: space-between;
    padding: 1.07rem 1.07rem;
    > *{
      display: flex;
      align-self: center;
    }
    .left i{
      margin-right: 0.57rem;
      margin-top: 0.3rem;
    }
    .right i{
      margin-top: 0.2rem;
    }
    .title{
      color: #333333;
      font-size: 1.14rem;
    }
  }
  .cell + .cell{
    box-shadow: 0 -1px 0 0 #EFEFEF;
  }
}
//
// 表格
//
.chart-wrap{
  padding: 1.07rem;
  min-height: 200px;
  background-color: #ffffff;
}
//
// banner 透明标签
//
.banner-label-group{
  margin: 15px 0 15px 0;
  display: flex;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  opacity: 0.9;
  > *{
    min-width: 91px;
    display: inline-block;
    border-radius: 1rem;
    border: 1px solid #ffffff;
    font-size: 0.92rem;
    padding: 0 1rem;
    margin: 0 0.5rem;
  }
}
//
// banner 文字
//
.banner-text{
  color: #ffffff;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-top: -150px;
  .right{
    font-size: 1.28rem;
  }
  .mid{
    font-size: 2.14rem;
    margin: 0 1rem;
  }
  .left{
    .top{
      font-size: 1.14rem;
    }
    .bot{
      font-size: 2rem;
      line-height: 1.3;
    }
  }
}
//
// 图标
//
// .top-wrap{
//   overflow: hidden;
//   width: 100%;
//   background: url("../../static/images/fp/f_bg.png") no-repeat center;
//   background-size: 100% 100%;
// }
.tv-icon,.book-icon,.unbrella-icon{
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.down-icon{
  width: 20px;
  height: 12px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.tv-icon{
  background-image: url("../../static/images/fp/label1.png");
}
.book-icon{
  background-image: url("../../static/images/fp/label2.png");
}
.unbrella-icon{
  background-image: url("../../static/images/fp/label3.png");
}
.down-icon{
  background-image: url("../../static/images/fp/down.png");
}
